/*
TemplateMo 593 personal shape
https://templatemo.com/tm-593-personal-shape
*/
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Footer */
.footer {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #312e81 100%);
color: var(--text-light);
padding: 3rem 0 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.4;
}
.footer::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
position: relative;
z-index: 2;
}
.footer-left p {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
margin: 0;
}
.footer-right {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.footer-right a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 0.9rem;
transition: all 0.3s ease;
position: relative;
}
.footer-right a:hover {
color: var(--text-light);
transform: translateY(-1px);
}
.footer-right a::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -3px;
left: 0;
background: var(--primary-color);
transition: width 0.3s ease;
}
.footer-right a:hover::after {
width: 100%;
}
/* Footer Mobile Responsiveness */
@media (max-width: 768px) {
.footer-content {
flex-direction: column;
text-align: center;
gap: 1.5rem;
}
.footer-right {
justify-content: center;
gap: 1.5rem;
}
.footer-right a {
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.footer-right {
flex-direction: column;
gap: 1rem;
}
}
:root {
--primary-color: #6366f1;
--secondary-color: #8b5cf6;
--accent-color: #f59e0b;
--accent-pink: #ec4899;
--accent-cyan: #06b6d4;
--text-primary: #0f172a;
--text-secondary: #64748b;
--text-blue: #0f4bd6;
--text-secondary: #64748b;
--text-secondary2: #101825;
--text-light: #ffffff;
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-dark: #0f172a;
--bg-box: #64748b;
--bg-card: rgba(255, 255, 255, 0.95);
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--gradient-tertiary: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
/* --gradient-elegant: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%); */
--gradient-elegant: linear-gradient(135deg, #764ba2 0%, #764ba2 70%, #667eea 100%);
--gradient-elegant-red: linear-gradient(135deg,#f32b2b 0%,#bb0303 50%,#c62828 100%);
--gradient-orange: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
--gradient-softblue: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
--gradient-green: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
--gradient-purple: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
--gradient-blue: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
--gradient-classicgold: linear-gradient(135deg,#b8860b 0%, #ffd700 100%);
--gradient-royalgold: linear-gradient(135deg,#8d6e00 0%,#ffcc33 50%,#ffd700 100%);
--gradient-gold: linear-gradient(135deg,#a67600 0%,#ffb300 100%);
--gradient-softgold: linear-gradient(135deg,#f9a825 0%,#ffeb3b 100%);
--gradient-premiumgold: linear-gradient(135deg,#7a5c00 0%,#d4af37 50%,#fff1a8 100%);
--gradient-content: linear-gradient(135deg, #764ba2 0%, #764ba2 70%, #667eea 100%);
--gradient-header: linear-gradient(135deg, #6a45a0 0%, #5f6eea 100%);
--header-gradient: linear-gradient(135deg,#4b2c82,#667eea);
--body-gradient: linear-gradient(135deg,#f3e8ff,#eef2ff);
--gradient-blue-light: linear-gradient(135deg, #3b6bbf 0%, #4facfe 100%);
--gradient-elegant-white: linear-gradient(135deg, #f5f7fa 0%, #e4ecf7 50%, #dfe9f3 100%);
--gradient-elegant-soft: linear-gradient(135deg, #eef2ff 0%, #e0c3fc 50%, #f5d0fe 100%);
--gradient-elegant-red-soft: linear-gradient(135deg, #fff5f5 0%, #ffe3e3 50%, #ffd6d6 100%);
--gradient-elegant-clean: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%);
--gradient-elegant-sky: linear-gradient(135deg, #ffffff 0%, #e0f2fe 50%, #bae6fd 100%);
--gradient-elegant-sky-premium: linear-gradient(135deg, #f8fbff 0%, #dbeafe 50%, #93c5fd 100%);
--gradient-elegant-sky-vivid: linear-gradient(135deg, #ffffff 0%, #cfefff 50%, #87ceeb 100%);
--gradient-elegant-grey: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #e5e7eb 100%);
--gradient-elegant-grey-premium: linear-gradient(135deg, #ffffff 0%, #eef2f7 50%, #d1d5db 100%);
--gradient-elegant-grey-cool: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 50%, #cbd5e1 100%);
--gradient-elegant-grey-contrast: linear-gradient(135deg, #ffffff 0%, #e5e7eb 50%, #9ca3af 100%);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--glass: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.2);
}
body {
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
line-height: 1.7;
color: var(--text-primary);
scroll-behavior: smooth;
overflow-x: hidden;
background: var(--bg-primary);
}
/* Navigation */
nav {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
z-index: 1000;
padding: 1rem 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
nav.scrolled {
background: rgba(255, 255, 255, 0.98);
box-shadow: var(--shadow-lg);
padding: 0.75rem 0;
}
.nav-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.bg1
{
background-color: var(-- );
}
.nav-links {
display: flex;
list-style: none;
gap: 2.5rem;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: var(--text-primary);
font-weight: 500;
font-size: 0.95rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
padding: 0.5rem 0;
}
.nav-links a:hover {
color: var(--primary-color);
transform: translateY(-1px);
}
.nav-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background: var(--gradient-primary);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(-50%);
border-radius: 1px;
}
.nav-links a:hover::after {
width: 100%;
}
/* Mobile Menu */
.mobile-menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
padding: 0.5rem;
z-index: 1001;
}
.hamburger {
width: 25px;
height: 3px;
background: var(--text-primary);
margin: 3px 0;
transition: all 0.3s ease;
border-radius: 1px;
}
.mobile-menu-toggle.active .hamburger:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.mobile-menu-toggle.active .hamburger:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active .hamburger:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
.mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background: rgba(15, 23, 42, 0.98);
backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 999;
}
.mobile-menu.active {
right: 0;
}
.mobile-nav-links {
list-style: none;
text-align: center;
}
.mobile-nav-links li {
margin: 2rem 0;
opacity: 0;
transform: translateY(30px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.active .mobile-nav-links li {
opacity: 1;
transform: translateY(0);
}
.mobile-menu.active .mobile-nav-links li:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.active .mobile-nav-links li:nth-child(2) { transition-delay: 0.2s; }
.mobile-menu.active .mobile-nav-links li:nth-child(3) { transition-delay: 0.3s; }
.mobile-menu.active .mobile-nav-links li:nth-child(4) { transition-delay: 0.4s; }
.mobile-nav-links a {
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 2.5rem;
font-weight: 500;
color: var(--text-light);
text-decoration: none;
transition: all 0.3s ease;
background: var(--gradient-elegant);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.mobile-nav-links a:hover {
transform: scale(1.05);
}
/* Hero Section */
.hero {
height: 100%;
display: flex;
/*align-items: center;*/
justify-content: center;
background: var(--gradient-elegant);
position: relative;
overflow: hidden;
}
.bannerbottom {
width: 100%;
height: 5vh;
display: flex;
align-items: flex-end; /* ⬅ pushes text to bottom */
justify-content: center; /* ⬅ keeps text centered horizontally */
background: var(--gradient-elegant);
padding-bottom: 5px; /* optional spacing from bottom */
margin-top: 86vh;
}
.hero img{
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-elegant);
position: relative;
/*overflow: hidden;*/
}
.heroservice {
height: 200vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-elegant);
position: relative;
overflow: hidden;
}
.hero::before,
.heroservice::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: float 25s ease-in-out infinite;
opacity: 0.7;
}
.hero::after,
.heroservice::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
animation: pulse 4s ease-in-out infinite alternate;
}
/** *****************************************/
.hero1 {
position: relative; /* reference for absolute positioning */
width: 100%;
height: 500px;
overflow: hidden;
}
.hero1 img {
width: 100%;
height: 500px;
object-fit: cover; /* fill banner */
}
.hero1-content {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%); /* perfect center */
text-align: center;
color: #fff;
padding: 1rem;
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1.5rem;
font-weight: 300;
margin-bottom: 3rem;
/*background: var(--gradient-elegant);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; */
letter-spacing: -1px;
}
/* Optional styling */
.hero1-subtitle {
text-transform: uppercase;
margin-top: 2rem;
color: rgba(255, 255, 255, 0.95);
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 2rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -1px;
padding: 0.4rem 1.2rem;
background: rgba(8, 50, 187, 0.45); /* text background */
border-radius: 6px;
display: inline-block; /* background fits text */
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.4s forwards;
}
.hero1 h1{
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
margin-bottom: 1.5rem;
opacity: 0;
/*transform: translateY(30px);*/
animation: fadeInUp 1s ease 0.4s forwards;
line-height: 1.1;
letter-spacing: 1px;
padding: 0 2rem;
text-align: center;
font-size: 3.5rem;
font-weight: 600;
background-clip: text;
letter-spacing: -1px;
position: relative;
}
/*
.hero1-content h1 {
font-size: 3rem;
margin: 0;
}*/
.hero1 .subtitle {
font-size: 1.1rem;
margin-top: 10px;
}
/**********************************************/
/* Floating Shapes */
.floating-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.shape {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
}
.shape-1 {
width: 80px;
height: 80px;
top: 20%;
left: 10%;
animation: floatShape1 20s ease-in-out infinite;
}
.shape-2 {
width: 120px;
height: 120px;
top: 60%;
right: 15%;
background: rgba(255, 255, 255, 0.08);
animation: floatShape2 25s ease-in-out infinite reverse;
}
.shape-3 {
width: 60px;
height: 60px;
top: 30%;
right: 25%;
background: rgba(255, 255, 255, 0.12);
animation: floatShape3 18s ease-in-out infinite;
}
.shape-4 {
width: 100px;
height: 100px;
bottom: 25%;
left: 20%;
background: rgba(255, 255, 255, 0.06);
border-radius: 20px;
animation: floatShape4 22s ease-in-out infinite;
}
.shape-5 {
width: 40px;
height: 40px;
top: 15%;
right: 40%;
background: rgba(255, 255, 255, 0.15);
animation: floatShape5 16s ease-in-out infinite reverse;
}
.shape-6 {
width: 140px;
height: 140px;
bottom: 15%;
right: 10%;
background: rgba(255, 255, 255, 0.04);
border-radius: 30px;
animation: floatShape6 28s ease-in-out infinite;
}
@keyframes floatShape1 {
0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
25% { transform: translateY(-30px) translateX(20px) rotate(90deg); }
50% { transform: translateY(-15px) translateX(-10px) rotate(180deg); }
75% { transform: translateY(-40px) translateX(15px) rotate(270deg); }
}
@keyframes floatShape2 {
0%, 100% { transform: translateY(0px) translateX(0px) scale(1); }
33% { transform: translateY(25px) translateX(-20px) scale(1.1); }
66% { transform: translateY(-20px) translateX(25px) scale(0.9); }
}
@keyframes floatShape3 {
0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
50% { transform: translateY(-25px) translateX(-30px) rotate(180deg); }
}
@keyframes floatShape4 {
0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
25% { transform: translateY(20px) translateX(-15px) rotate(45deg); }
50% { transform: translateY(-10px) translateX(30px) rotate(90deg); }
75% { transform: translateY(15px) translateX(-20px) rotate(135deg); }
}
@keyframes floatShape5 {
0%, 100% { transform: translateY(0px) translateX(0px) scale(1); }
50% { transform: translateY(-35px) translateX(20px) scale(1.2); }
}
@keyframes floatShape6 {
0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
33% { transform: translateY(-15px) translateX(10px) rotate(60deg); }
66% { transform: translateY(10px) translateX(-25px) rotate(120deg); }
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(1deg); }
}
@keyframes pulse {
0% { opacity: 0.5; }
100% { opacity: 0.8; }
}
.hero-content {
text-align: center;
color: var(--text-light);
z-index: 2;
position: relative;
max-width: 900px;
padding: 2 2rem;
}
.hero-subtitle {
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.2s forwards;
margin-bottom: 0rem;
margin-top: 4rem;
color: rgba(255, 255, 255, 0.8);
}
.hero h1,
.heroservice h1 {
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 4.0rem;
font-weight: 800;
margin-bottom: 1.5rem;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.4s forwards;
line-height: 1.2;
letter-spacing: -1px;
padding: 0 2rem;
color: rgba(255, 255, 255, 0.8);
}
.hero h1{
text-shadow:
-1px -1px 0 rgb(63, 62, 62),
1px -1px 0 rgb(63, 62, 62),
-1px 1px 0 rgb(63, 62, 62),
1px 1px 0 rgb(63, 62, 62),
}
.hero .subtitle,
.heroservice .subtitle {
font-size: 1.3rem;
margin-bottom: 3rem;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease 0.6s forwards;
color: rgba(255, 255, 255, 0.9);
font-weight: 400;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/*************************************Image background ****************/
.Imagebackground {
position: relative;
height: 100vh;
/* background: url("images/carousel-1.jpg") center/cover no-repeat; */
overflow: hidden;
}
/* Half blur overlay */
.blur-half {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
backdrop-filter: blur(10px);
background: rgba(0, 0, 0, 0.3); /* optional dark layer */
}
/* Text content */
.content {
position: relative;
z-index: 2;
width: 45%; /* 🔥 controls space */
padding-left: 5%;
}
.Imagebackground-slanting{
position: relative;
height: 60%;
padding: 10px;
overflow: hidden;
display: flex;
align-items: center;
border: 2px solid rgba(241, 185, 28, 0.6);
border-radius: 25px;
}
.blur-slope-slanting {
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 100%;
backdrop-filter: blur(12px);
background:var(--gradient-elegant);
/* 60° Slanted Shape */
clip-path: polygon(0 0, 65% 0, 45% 100%, 0% 100%);
}
.content-slanting {
position: relative;
z-index: 2;
color: white;
padding-left: 5%;
max-width: 500px;
}
.content-slanting-right {
position: relative;
z-index: 2;
/*color: var(--text-secondary);*/
padding-left: 30%;
max-width: 98%;
height: 70%;
}
.txt-1 {
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
display: block;
font-size: 1.0em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
unicode-bidi: isolate;
text-align: justify;
}
@media (max-width: 768px) {
.Imagebackground-slanting {
flex-direction: column;
height: auto;
padding: 20px 15px;
}
/* Remove heavy slant effect for mobile */
.blur-slope-slanting {
width: 100%;
height: 100%;
clip-path: none; /* 🔥 remove slant */
opacity: 0.9;
}
/* Left text (PM Surya block) */
.content {
position: relative;
z-index: 2;
text-align: center;
margin-bottom: 15px;
}
.white-text-1 {
font-size: 22px;
line-height: 1.3;
}
/* Right content becomes full width */
.content-slanting-right {
padding-left: 0;
max-width: 100%;
height: auto;
text-align: center;
}
/* Text */
.spanbox {
display: block;
font-size: 14px;
padding: 10px;
text-align: justify;
}
/* Grid fix */
.contact-form-grid {
margin-top: 15px;
}
.form-row-two {
display: flex;
flex-direction: column;
gap: 10px;
}
.form-group-two {
display: flex;
justify-content: space-between;
background: #ffffff;
padding: 10px;
border-radius: 8px;
font-size: 14px;
}
.form-group-one span {
font-size: 16px;
display: block;
text-align: center;
margin-bottom: 10px;
}
}
/********************** index slanting page ***********************/
button {
padding: 12px 25px;
border: none;
background: #ff9800;
color: white;
font-weight: bold;
cursor: pointer;
border-radius: 5px;
}
.gold-text-1 {
/*background: linear-gradient(45deg, #d4af37, #f4e27a, #b8860b);*/
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 1px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.25);
background: rgba(255,255,255,0.45);
}
.gold-text-2 {
font-size: 48px;
font-weight: 700;
color: #b8860b; /* Deep gold */
text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
letter-spacing: 1px;
text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.3);
}
.gold-text-3 {
font-size: 48px;
font-weight: 800;
background: linear-gradient(45deg, #d4af37, #f4e27a, #b8860b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.3);
}
.silver-text-1 {
font-size: 40px;
font-weight: 800;
background: linear-gradient(45deg, #E0E0E0, #F5F5F5, #C0C0C0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 1px 2px 4px rgba(0,0,0,0.2); /* optional for depth */
}
.ultable {
display: table;
width: 100%;
}
.ultable li {
display: table-row;
}
.ultable li span {
display: table-cell;
padding: 10px;
}
/********************Progress**************************************************/
.progress-container {
display: flex;
gap: 25px; /* smooth spacing */
font-family: 'Poppins', sans-serif;
flex-wrap: wrap;
}
/*
.step {
position: relative;
padding: 5px 30px;
background: rgba(255, 255, 255, 0.2);
color: var(--text-light);
font-weight: 600;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
flex: 0 0 auto;
width: 28%;
text-decoration: none;
font-size: 1rem;
transform: translateY(30px);
opacity: 0;
animation: fadeInUp 1s ease 0.8s forwards;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
letter-spacing: 0.5px;
}
*/
/* Arrow shape */
.step::after {
content: "";
position: absolute;
top: 60%;
right: -28px;
transform: translateY(-100%);
width: 25px;
height: 50px;
background: inherit;
/*background:var(--gradient-elegant);*/
clip-path: polygon(0 0, 100% 50%, 0 100%);
border-right: 2px solid rgba(0,0,0,0.08);
}
/* Remove arrow from last step */
.step:last-child::after {
display: none;
}
@media (max-width: 768px) {
.progress-container {
flex-direction: column;
}
.step::after {
display: none; /* remove arrow on mobile */
}
}
@media (max-width:992px){
.step-wrap{
flex:0 0 45%;
}
}
@media (max-width:576px){
.step-wrap{
flex:0 0 100%;
}
}
/******************** Model ************/
.steps1 {
display: grid;
grid-template-columns: repeat(3, 1fr); /* exactly 3 per row */
gap: 20px;
justify-items: center;
}
.step-wrap{
width: 100%;
display:flex;
justify-content:center;
}
.step1 {
position: relative;
min-width: 400px;
max-width: 400px;
min-height: 300px;
max-height: 300px;
display:flex;
align-items:center;
justify-content:center;
clip-path: polygon(
0% 0%,
80% 0%,
100% 50%,
80% 100%,
0% 100%,
5% 50%,
5% 50%
);
}
/* Divider line */
.step1::before{
content:"";
position:absolute;
left:25%;
top:0;
width:1px;
height:100%;
background:#000; /* border color */
}
/* LEFT NUMBER AREA */
.step-number{
width:25%;
display:flex;
align-items:center;
justify-content:center;
font-size:40px;
font-weight:700;
color:white;
padding-right: 25px;
text-shadow:
2px 2px 4px rgba(0,0,0,0.4),
0 0 10px rgba(0,0,0,0.3);
}
/* RIGHT CONTENT AREA */
.step-content{
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
width:65%;
padding-left:10px;
padding-right:10px;
padding-top:20px;
padding-bottom:20px;
/*color:white; */
}
.step-content span{
display: inline-block;
text-decoration: underline;
margin-top: 0px;
margin-right: 40px;
margin-bottom: 3px;
margin-left: 5px;
padding: 5px 7px;
color: #ffffff;
font-size: 1.5em;
font-weight: 500;
text-align: center;
text-shadow: 4px 4px 4px rgba(0,0,0,0.5);
}
.step-content p{
display: inline-block;
margin: 0 40px 3px 5px;
padding: 2px 5px;
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif; /*'Playfair Display', 'Cormorant Garamond', 'Libre Baskerville', serif;*/
font-size: 1.2em;
font-weight: 400;
text-align: justify;
color: #fff;
text-shadow: 0 3px 6px rgba(0,0,0,0.25);
font-style: italic
}
.steps-last {
display: flex;
align-items: center;
position: relative;
margin-left: 0px;
}
.steps-last {
min-width: 218px;
max-width: 218px;
min-height: 100px;
/*padding: 25px 110px;*/
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(
0% 0%,
92% 0%,
92% 50%,
92% 100%,
0% 100%,
0% 50%, /* Back tip */
0% 50% /* Back tip */
);
}
.step-wrap + .step-wrap {
margin-left: 10px;
}
.steps1 + .step-wrap{
margin-left: -50px;
}
.step-wrap:nth-child(1){ z-index: 9; }
.step-wrap:nth-child(2){ z-index: 8; }
.step-wrap:nth-child(3){ z-index: 7; }
.step-wrap:nth-child(4){ z-index: 6; }
.step-wrap:nth-child(5){ z-index: 5; }
.step-wrap:nth-child(6){ z-index: 4; }
.step-wrap:nth-child(7){ z-index: 3; }
.step-wrap:nth-child(8){ z-index: 2; }
.step-wrap:nth-child(9){ z-index: 1; }
.step-wrap:nth-child(1) .step1{
background: linear-gradient(to right,#667eea 0%,#4f6be6 25%,#9f7aea 25%,#6b46c1 100%);
z-index:9;
}
.step-wrap:nth-child(2) .step1{
background: linear-gradient(to right,#ff9a9e 0%,#f6416c 25%,#ff6a88 25%,#ff99ac 100%);
}
.step-wrap:nth-child(3) .step1{
background: linear-gradient(to right,#45709c 0%,#7cb7f3 25%,#185a9d 25%,#2c3e50 100%);
}
.step-wrap:nth-child(4) .step1{
background: linear-gradient(to right,#f7971e 0%,#ffd200 25%,#ff7e5f 25%,#feb47b 100%);
}
.step-wrap:nth-child(5) .step1{
background: linear-gradient(to right,#00c6ff 0%,#0072ff 25%,#5f9cff 25%,#004e92 100%);
}
.step-wrap:nth-child(6) .step1{
background: linear-gradient(to right,#ff512f 0%,#dd2476 25%,#ff7e5f 25%,#c94b4b 100%);
}
.step-wrap:nth-child(7) .step1{
background: linear-gradient(to right,#11998e 0%,#38ef7d 25%,#0f2027 25%,#2c5364 100%);
}
.step-wrap:nth-child(8) .step1{
background: linear-gradient(to right,#fc466b 0%,#3f5efb 25%,#6a11cb 25%,#2575fc 100%);
}
.step-wrap:nth-child(9) .step1{
background: linear-gradient(to right,#ff9966 0%,#ff5e62 25%,#ff758c 25%,#ff7eb3 100%);
}
/*
.step1-content {
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1.0em;
font-weight: 600;
color: var(--text-light);
padding: 50px;
margin: 0;
vertical-align: middle;
min-width: 200px;
border: #000;
border-width: 1px;
text-wrap: wrap;
text-align: center;
}
.step-box-content {
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1.0em;
color: var(--text-light);
padding-left: 5px;
padding-right: 35px;
padding-top: 10px;
margin-top: 0;
margin-left: 5;
margin-right: 8px;
vertical-align: middle;
min-width: 200px;
border: #000;
border-width: 0px;
text-wrap: wrap;
text-align: center;
}
.step-wrap{
margin-left: 51px;
}
*/
/*
.step-box {
padding-left: 10px;
padding-right: 20px;
border-top: none;
margin-top: 0px;
min-height: 220px;
min-width: 200px;
box-sizing: border-box;
text-align: justify;
margin-right: 100%;
margin-left: 0%;
}
Number circle
.number {
position: relative;
left: 50%;
top: 10px;
transform: translateX(-50%);
background: #fff;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #141111;
}
*/
/*******************************************************************************/
.cta-button {
display: inline-block;
padding: 1.2rem 3rem;
background: rgba(255, 255, 255, 0.2);
color: var(--text-light);
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
transform: translateY(30px);
opacity: 0;
animation: fadeInUp 1s ease 0.8s forwards;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
letter-spacing: 0.5px;
}
.cta-button:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.4);
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Scroll Indicator */
.scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 50px;
border: 2px solid rgba(255, 255, 255, 0.6);
border-radius: 25px;
cursor: pointer;
transition: all 0.3s ease;
}
.scroll-indicator:hover {
border-color: rgba(255, 255, 255, 0.9);
}
.scroll-indicator::before {
content: '';
position: absolute;
top: 10px;
left: 50%;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
transform: translateX(-50%);
animation: scroll 2s infinite;
}
@keyframes scroll {
0% { transform: translateX(-50%) translateY(0); opacity: 1; }
100% { transform: translateX(-50%) translateY(20px); opacity: 0; }
}
/* Section Styles */
section {
/*padding-top: 2rem;*/
/*padding-bottom: 5rem;*/
padding-bottom: 0rem;
padding-left: 0;
padding-right: 0;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.section-sub-title {
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
background: var(--gradient-blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: left;
padding-left: 10px;
}
.h3white-1 {
font-size: 1.1rem;
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
line-height: 1.7;
margin: 0 auto 20px;
padding: 0 10px;
text-align: justify;
}
.h3white {
font-size: 1.0rem;
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
letter-spacing: 0.5px;
line-height: 1.7;
width: 100%;
margin: 0 auto 20px auto;
padding: 0 10px;
text-align: justify;
text-justify: inter-word;
}
.spanbox
{
display: inline-block;
margin-top: 0px;
margin-right: 40px;
margin-bottom: 3px;
margin-left: 5px;
padding: 5px 7px;
}
.spanbox-center
{
display:block;
margin:0 auto;
padding:5px 0px;
width: 100%;
}
.h3color {
color: #fff;
font-size: 1.25rem;
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
text-align: justify;
font-weight: 400;
letter-spacing: 0.5px;
line-height: 1.7;
max-width: 95%;
margin: 0 auto 20px auto;
padding: 0 10px;
}
.h3title {
color: #ffffff;
font-size: 1.4rem;
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
font-weight: 600;
letter-spacing: 0.3px;
line-height: 1.3;
max-width: 80%;
/* margin: 0 auto 15px 30px; */
padding: 0 10px;
text-align: center;
}
/* About Section */
.about {
background: var(--bg-secondary);
position: relative;
}
.about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 6rem;
align-items: center;
position: relative;
}
.about-image {
width: 100%;
height: 700px;
background: url('images/RS-3.jpeg') center/cover;
border-radius: 30px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-2xl);
transform: rotate(-2deg);
transition: transform 0.4s ease;
vertical-align: top;
}
.about-image:hover {
transform: rotate(0deg) scale(1.02);
}
.about-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.2) 100%);
transition: opacity 0.3s ease;
}
.about-image:hover::before {
opacity: 0.7;
}
.about-image::after {
}
.about-text h3 {
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 2.5rem;
margin-bottom: 2rem;
color: var(--text-primary);
font-weight: 500;
line-height: 1.3;
background: var(--gradient-elegant);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
}
.faq-content h3 {
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1.2rem;
margin-bottom: 0.2rem;
color: var(--text-light);
font-weight: 500;
line-height: 1.0;
/* background: var(--gradient-elegant);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; */
letter-spacing: -0.5px;
}
.faq-content p {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.8;
}
.contactUs h3 {
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1.5rem;
margin-bottom: 2rem;
font-weight: 500;
line-height: 1.3;
background: var(--gradient-elegant-red);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
}
.contactUs h4 {
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1.0rem;
margin-bottom: 2rem;
font-weight: 500;
line-height: 1.3;
background: var(--gradient-elegant-red);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
}
.contactUs-card
{
margin: 1.5rem;
width: 60%;
border-radius: 5px;
padding: 1.5rem 1.5rem;
background: #fcfdff;
color: var(--text-primary);
text-decoration: none;
border-radius: 30px;
font-weight: 600;
font-size: 1rem;
transform: translateY(30px);
opacity: 0;
animation: fadeInUp 1s ease 0.8s forwards;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(37, 37, 37, 0.3);
backdrop-filter: blur(10px);
letter-spacing: 0.5px;
}
.service {
max-width: 1400px;
margin: 0 auto;
padding: 0 1rem;
min-height: 600px;
background-image: url("images/banner.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.container-service-card {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
display: flex;
flex-wrap: wrap; /* allow items to move to next row */
justify-content: flex-start; /* align items to the left */
gap: 1.5rem;
}
.service-card {
flex: 0 0 calc(33.333% - 1rem);
padding: 1.5rem;
background: rgba(252, 253, 255, 0.75);
border-radius: 15px;
border: 1px solid rgba(0,0,0,0.2);
display: flex;
align-items: center;
box-sizing: border-box;
}
.service-card img{
width: 50px;
height: 75px;
object-fit: contain;
margin-right: 15px;
}
.service-text {
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
}
/* First line */
.service-text h4 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
}
/* Second line */
.service-text span {
margin-top: 4px;
font-size: 0.9rem;
color: #666;
}
.service-card:hover {
transform: translateY(-4px);
transition: 0.3s ease;
}
@media (max-width: 768px) {
.service-card {
flex: 0 0 100%;
}
}
.contactUs-card i,
.contactUs-card span
{
color: var(--text-primary);
background: var(--gradient-elegant-red);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 2px;
font-weight: 600;
font-size: 1.5rem;
}
.about-text p {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 2rem;
line-height: 1.8;
}
.skills {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 3rem;
}
.skill-tag {
padding: 0.75rem 1.5rem;
background: var(--bg-card);
color: var(--primary-color);
border-radius: 30px;
font-size: 0.9rem;
font-weight: 600;
border: 1px solid rgba(99, 102, 241, 0.2);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.skill-tag:hover {
background: var(--primary-color);
color: var(--text-light);
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
/* Portfolio Section */
.portfolio {
background: var(--bg-primary);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
margin-top: 2rem;
}
.portfolio-item {
background: var(--bg-card);
border-radius: 25px;
overflow: hidden;
box-shadow: var(--shadow-lg);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(20px);
/* opacity: 0; */
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.portfolio-item.animate {
transform: translateY(0);
opacity: 1;
}
.portfolio-item:hover {
transform: translateY(-15px);
box-shadow: var(--shadow-2xl);
}
.portfolio-image {
width: 100%;
height: 350px;
background: var(--gradient-primary);
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
}
/**** **/
.portfolio-carousel {
position: relative;
width: 100%;
height: 350px; /* adjust as needed */
overflow: hidden;
}
.portfolio-slide {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 100%; /* hide offscreen initially */
transition: left 0.5s ease;
}
.portfolio-slide.active {
left: 0;
}
.portfolio-slide.prev {
left: -100%;
}
.portfolio-slide.next {
left: 100%;
}
/* Navigation arrows */
.portfolio-carousel button.prev,
.portfolio-carousel button.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0,0,0,0.5);
color: white;
border: none;
font-size: 24px;
padding: 10px;
cursor: pointer;
z-index: 2;
}
.portfolio-carousel button.prev {
left: 10px;
}
.portfolio-carousel button.next {
right: 10px;
}
.portfolio-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
transition: all 0.3s ease;
}
.portfolio-item:hover .portfolio-image::before {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.4) 0%, rgba(139, 92, 246, 0.3) 100%);
}
.portfolio-content {
padding: 0.5rem;
text-align: center;
}
.portfolio-content h4 {
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1.0rem;
margin-bottom: 1rem;
/* color: var(--text-primary); */
font-weight: 600;
background: var(--gradient-blue);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
}
.portfolio-content p {
color: var(--text-secondary);
margin-bottom: 1.5rem;
line-height: 1.7;
}
.portfolio-tech {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.tech-tag {
padding: 0.4rem 1rem;
background: var(--bg-secondary);
color: var(--text-secondary);
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.3s ease;
}
.tech-tag:hover {
background: var(--primary-color);
color: var(--text-light);
}
.tech-tagContact {
padding: 0.4rem 1rem;
background: var(--bg-secondary);
color: var(--text-secondary);
border-radius: 30px;
font-size: 1.60rem;
font-weight: 500;
transition: all 0.3s ease;
}
/* Contact Section */
.contact {
/*background: linear-gradient(135deg, #3b4cb8 0%, #4a2c65 50%, #9c35a8 100%); --original-color */
/* background: linear-gradient(135deg, #f8f9ff 0%, #f5f0fb 50%, #fdf4ff 100%); */
/*background: linear-gradient(135deg, #ffffff 0%, #fbfbfd 50%, #f7f7fb 100%);*/
/* background: linear-gradient(135deg, #ffffff 0%, #faf7ff 50%, #f6f2ff 100%);*/
/*color: var(--text-light);*/
color: #333;
position: relative;
overflow: hidden;
}
.contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
animation: contactFloat 30s ease-in-out infinite;
opacity: 0.6;
}
.contact::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 25% 75%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
animation: contactPulse 6s ease-in-out infinite alternate;
}
/* Contact Floating Shapes */
.contact-floating-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.contact-shape-whitebg-1 {
position: absolute;
background: linear-gradient(135deg, rgba(255,150,0,0.08), rgba(255,0,0,0.08));
border-radius: 50%;
}
.contact-shape-whitebg-2 {
position: absolute;
background: rgba(0, 0, 0, 0.04);
backdrop-filter: blur(4px);
border-radius: 50%;
}
.contact-shape-whitebg-3 {
position: absolute;
background: rgba(0, 0, 0, 0.05);
border-radius: 50%;
}
.contact-shape {
position: absolute;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
}
.contact-shape-1 {
width: 70px;
height: 70px;
top: 15%;
left: 8%;
animation: contactFloatShape1 24s ease-in-out infinite;
}
.contact-shape-2 {
width: 110px;
height: 110px;
top: 65%;
right: 12%;
background: rgba(255, 255, 255, 0.06);
animation: contactFloatShape2 28s ease-in-out infinite reverse;
}
.contact-shape-3 {
width: 55px;
height: 55px;
top: 25%;
right: 30%;
background: rgba(255, 255, 255, 0.1);
animation: contactFloatShape3 20s ease-in-out infinite;
}
.contact-shape-4 {
width: 90px;
height: 90px;
bottom: 20%;
left: 18%;
background: rgba(255, 255, 255, 0.05);
border-radius: 25px;
animation: contactFloatShape4 26s ease-in-out infinite;
}
.contact-shape-5 {
width: 35px;
height: 35px;
top: 12%;
right: 45%;
background: rgba(255, 255, 255, 0.12);
animation: contactFloatShape5 18s ease-in-out infinite reverse;
}
.contact-shape-6 {
width: 130px;
height: 130px;
bottom: 12%;
right: 8%;
background: rgba(255, 255, 255, 0.04);
border-radius: 35px;
animation: contactFloatShape6 32s ease-in-out infinite;
}
/* **************************************************** */
.workflow-container-image-style {
display: flex;
flex-direction: column;
position: relative;
max-width: 800px;
margin: 15px auto;
}
/* The central vertical blue line */
.workflow-container-image-style::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background-color: #02214e; /* Blue line color */
/*transform: translateX(-50%); */
}
.milestone-step {
display: flex;
justify-content: space-between; /* This pushes elements apart: left/right */
align-items: center;
position: relative;
margin-bottom: 10px;
}
.milestone-number-oval {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
letter-spacing: 2px;
width: 80px; /* wider than height */
height: 40px;
border-radius: 50%; /* keeps it oval */
background-color: #02214e;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
border: 1px solid #ffffff;
}
.milestone-number {
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
width: 40px; height: 40px;
border-radius: 50%;
background-color: #02214e;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
border: 1px solid #ffffff;
}
.milestone-card {
/* (other styling properties omitted for brevity) */
display: flex; width: 45%; padding: 0px; border-radius: 10px;
padding: 0.5rem 0.5rem;
background: rgba(255, 255, 255, 0.2);
color: var(--text-light);
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
transform: translateY(30px);
opacity: 0;
animation: fadeInUp 1s ease 0.8s forwards;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
letter-spacing: 0.5px;
}
/* Position cards to the LEFT of the line */
.left-align {
margin-right: 15%; /* Creates the required gap */
}
/* Position cards to the RIGHT of the line */
.right-align {
margin-left: 55%; /* Creates the required gap */
order: 2; /* Forces this specific card to the right side of the flex container */
}
.milestone-arrow {
position: relative;
color: white;
padding: 10px 20px;
border-radius: 5px;
display: inline-block;
margin-right: 15px;
}
.milestone-arrow-title {
font-size: 1.2rem; /* Large heading */
font-weight: 800; /* Bold */
background-clip: text;
letter-spacing: -0.5px;
/* background: linear-gradient(45deg, #E0E0E0, #F5F5F5, #C0C0C0); */
background: #fcd965;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 1px 2px 4px rgba(0,0,0,0.2); /* optional for depth */
}
.milestone-arrow::after {
/* Arrow styling */
content: '';
position: absolute;
top: 50%; /* Align the arrow vertically in the middle */
right: -35px; /* Position the arrow on the right edge */
transform: translateY(-50%); /* Fine-tune vertical alignment */
width: 0;
height: 0;
color: var(--text-light);
opacity: 0;
animation: fadeInUp 1s ease 0.8s forwards;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border-top: 10px solid transparent; /* Top part of the triangle, transparent */
border-bottom: 10px solid transparent; /* Bottom part, transparent */
border-left: 10px solid rgba(255, 255, 255, 0.233);
}
.milestone-arrow-left {
/* Main box styling */
position: relative;
color: white;
padding: 10px 20px;
border-radius: 5px;
display: inline-block;
margin-left: 15px; /* Space for the arrow */
/* Add drop-shadow filter to the container */
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
}
.milestone-arrow-left::before {
content: '';
position: absolute;
top: 50%;
left: -35px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid rgba(255, 255, 255, 0.2); /* The visible part of the triangle (matches the box color) */
color: var(--text-light);
opacity: 0;
animation: fadeInUp 1s ease 0.8s forwards;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/**********************************************************/
.map-container iframe {
width: 100%;
height: 400px; /* adjust as needed */
border: 0;
}
@keyframes contactFloatShape1 {
0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
25% { transform: translateY(-25px) translateX(15px) rotate(90deg); }
50% { transform: translateY(-10px) translateX(-8px) rotate(180deg); }
75% { transform: translateY(-35px) translateX(12px) rotate(270deg); }
}
@keyframes contactFloatShape2 {
0%, 100% { transform: translateY(0px) translateX(0px) scale(1); }
33% { transform: translateY(20px) translateX(-15px) scale(1.05); }
66% { transform: translateY(-15px) translateX(20px) scale(0.95); }
}
@keyframes contactFloatShape3 {
0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
50% { transform: translateY(-20px) translateX(-25px) rotate(180deg); }
}
@keyframes contactFloatShape4 {
0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
25% { transform: translateY(15px) translateX(-12px) rotate(30deg); }
50% { transform: translateY(-8px) translateX(25px) rotate(60deg); }
75% { transform: translateY(12px) translateX(-18px) rotate(90deg); }
}
@keyframes contactFloatShape5 {
0%, 100% { transform: translateY(0px) translateX(0px) scale(1); }
50% { transform: translateY(-30px) translateX(15px) scale(1.15); }
}
@keyframes contactFloatShape6 {
0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
33% { transform: translateY(-12px) translateX(8px) rotate(45deg); }
66% { transform: translateY(8px) translateX(-20px) rotate(90deg); }
}
@keyframes contactFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-15px) rotate(0.5deg); }
66% { transform: translateY(-10px) rotate(-0.5deg); }
}
@keyframes contactPulse {
0% { opacity: 0.4; }
100% { opacity: 0.7; }
}
.contact-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
position: relative;
z-index: 10;
}
.contact-content-max {
text-align: center;
max-width: 100%;
margin: 0 auto;
position: relative;
z-index: 10;
}
.contact-content-max h3{
text-align: justify;
}
.contact-list {
list-style-position: inside;
padding: 0 15px;
margin: 20px auto;
display: block;
max-width: 800px;
font-size: 1.25rem;
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
letter-spacing: 0.5px;
line-height: 1.7;
/* color: #ffffff; */
text-align: left;
}
.solar-list
{
list-style: none; /* Remove default bullets */
/*padding-left: 0;*/
padding: 0;
margin: 20px auto;
max-width: 90%;
}
.solar-list li
{
display: flex;
align-items: flex-start; /* top align for multi-line text */
gap: 10px; /* space between bullet/icon and text */
padding: 0 15px;
margin-bottom: 12px;
font-size: 1.1rem;
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
font-weight: 400;
letter-spacing: 0.5px;
line-height: 1.7;
text-align: justify;
}
.solar-list-1 li::before {
/*content: "☀️"; */
content: "⚡";
font-weight: bold;
margin-right: 8px;
}
.solar-list-2 li::before {
content: "✓";
font-weight: bold;
margin-right: 8px;
}
.solar-list-3 li::before {
/*content: "⚠";*/
content: "✗";
font-weight: bold;
margin-right: 8px;
}
.solar-list-4 li::before {
/*content: "⚠";*/
content: "⭐";
font-weight: bold;
margin-right: 8px;
}
.solar-list-border li{
padding-left:10px;
margin-bottom:6px;
}
/* Color variations */
.solar-list-border li:nth-child(1) { border-left:4px solid #8b5cf6;}
.solar-list-border li:nth-child(2) { border-left:4px solid #10b981;}
.solar-list-border li:nth-child(3) { border-left:4px solid #f59e0b;}
.solar-list-border li:nth-child(4) { border-left:4px solid #ef4444;}
.solar-list-border li:nth-child(5) { border-left:4px solid #3b82f6; } /* blue */
.solar-list-border li:nth-child(6) { border-left:4px solid #ec4899; } /* pink */
.solar-list-border li:nth-child(7) { border-left:4px solid #22c55e; } /* green */
.solar-list-border li:nth-child(8) { border-left:4px solid #6366f1; } /* indigo */
.solar-list-border li:nth-child(9) { border-left:4px solid #e11d48; } /* rose */
.solar-list-border li:nth-child(10) { border-left:4px solid #14b8a6; } /* teal */
.solar-list-border li:nth-child(11) { border-left:4px solid #f97316; } /* orange */
.solar-list-border li:nth-child(12) { border-left:4px solid #84cc16; } /* lime */
.solar-list-border li:nth-child(13) { border-left:4px solid #06b6d4; } /* cyan */
.solar-list-border li:nth-child(14) { border-left:4px solid #a855f7; } /* violet */
/* Color variations */
.solar-list-border li:nth-child(1) i { margin-right: 8px;padding-top:10px; color:#8b5cf6;}
.solar-list-border li:nth-child(2) i { margin-right: 8px;padding-top:10px; color:#10b981;}
.solar-list-border li:nth-child(3) i { margin-right: 8px;padding-top:10px; color:#f59e0b;}
.solar-list-border li:nth-child(4) i { margin-right: 8px;padding-top:10px; color:#ef4444;}
.solar-list-border li:nth-child(5) i { margin-right: 8px;padding-top:10px; color:#3b82f6; } /* blue */
.solar-list-border li:nth-child(6) i { margin-right: 8px;padding-top:10px; color:#ec4899; } /* pink */
.solar-list-border li:nth-child(7) i { margin-right: 8px;padding-top:10px; color:#22c55e; } /* green */
.solar-list-border li:nth-child(8) i { margin-right: 8px;padding-top:10px; color:#6366f1; } /* indigo */
.solar-list-border li:nth-child(9) i { margin-right: 8px;padding-top:10px; color:#e11d48; } /* rose */
.solar-list-border li:nth-child(10) i { margin-right: 8px;padding-top:10px; color:#14b8a6; } /* teal */
.solar-list-border li:nth-child(11) i { margin-right: 8px;padding-top:10px; color:#f97316; } /* orange */
.solar-list-border li:nth-child(12) i { margin-right: 8px;padding-top:10px; color:#84cc16; } /* lime */
.solar-list-border li:nth-child(13) i { margin-right: 8px;padding-top:10px; color:#06b6d4; } /* cyan */
.solar-list-border li:nth-child(14) i { margin-right: 8px;padding-top:10px; color:#a855f7; } /* violet */
.solar-list-noborder li:nth-child(1) i { margin-right: 8px;padding-top:10px; color:#8b5cf6;}
.solar-list-noborder li:nth-child(2) i { margin-right: 8px;padding-top:10px; color:#10b981;}
.solar-list-noborder li:nth-child(3) i { margin-right: 8px;padding-top:10px; color:#f59e0b;}
.solar-list-noborder li:nth-child(4) i { margin-right: 8px;padding-top:10px; color:#ef4444;}
.solar-list-noborder li:nth-child(5) i { margin-right: 8px;padding-top:10px; color:#3b82f6; } /* blue */
.solar-list-noborder li:nth-child(6) i { margin-right: 8px;padding-top:10px; color:#ec4899; } /* pink */
.solar-list-noborder li:nth-child(7) i { margin-right: 8px;padding-top:10px; color:#22c55e; } /* green */
.solar-list-noborder li:nth-child(8) i { margin-right: 8px;padding-top:10px; color:#6366f1; } /* indigo */
.solar-list-noborder li:nth-child(9) i { margin-right: 8px;padding-top:10px; color:#e11d48; } /* rose */
.solar-list-noborder li:nth-child(10) i { margin-right: 8px;padding-top:10px; color:#14b8a6; } /* teal */
.solar-list-noborder li:nth-child(11) i { margin-right: 8px;padding-top:10px; color:#f97316; } /* orange */
.solar-list-noborder li:nth-child(12) i { margin-right: 8px;padding-top:10px; color:#84cc16; } /* lime */
.solar-list-noborder li:nth-child(13) i { margin-right: 8px;padding-top:10px; color:#06b6d4; } /* cyan */
.solar-list-noborder li:nth-child(14) i { margin-right: 8px;padding-top:10px; color:#a855f7; } /* violet */
/* LI styling */
.contact-list li {
padding: 0.6rem 1.2rem;
margin-bottom: 0.6rem;
background: rgba(0, 0, 0, 0.05);
border-radius: 6px;
font-size: 1.5rem;
}
.contact .section-title {
background: linear-gradient(135deg, #044fb8 0%, #62a2f7 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
}
.section-title::after {
content: '';
position: absolute;
width: 60px;
height: 4px;
background: var(--gradient-primary);
bottom: -20px;
left: 50%;
transform: translateX(-50%);
border-radius: 2px;
}
.section-title {
text-align: center;
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 3rem;
font-weight: 700;
margin-bottom: 4rem;
background: var(--gradient-elegant);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -1px;
}
.contact-form {
display: grid;
gap: 2rem;
margin-top: 3rem;
}
.contact-form-grid {
display: grid;
gap: 2rem;
margin-top: 1px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.form-group {
display: grid;
gap: 0.75rem;
text-align: left;
}
.form-group-max {
display: grid;
gap: 0.75rem;
text-align:center;
}
.form-group-two, .form-group-one {
display: grid;
gap: 0.2rem;
text-align:center;
}
.form-row-max {
display: grid;
/*grid-template-columns: 1fr 1fr;*/
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.form-row-two {
display: grid;
/*grid-template-columns: 1fr 1fr;*/
grid-template-columns: repeat(2, 1fr);
gap: 0.2rem;
}
.form-row-one {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 0.2rem;
}
.form-group label {
font-weight: 500;
color: var(--gradient-elegant);
font-size: 0.9rem;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 1.2rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
background: var(--gradient-blue);
color: var(--text-light);
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1rem;
font-weight: 400;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
resize: vertical;
}
.form-group select option {
background-color: #524f7c;
color: #f1f1f1;
}
.form-group-max span {
padding: 1.2rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
background: var(--gradient-elegant);
color: var(--text-light);
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1.8rem;
font-weight: 400;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
resize: vertical;
}
.form-group-max span i
{
color: var(--text-primary);
background: var(--gradient-royalgold);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
}
.form-group-two span,
.form-group-one span {
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 0.6rem;
padding-top: 0.6rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 7px;
background: var(--gradient-elegant);
color: var(--text-light);
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1.3rem;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
resize: vertical;
}
.form-group-two span i,
.form-group-one span i
{
color: var(--text-primary);
background: var(--gradient-royalgold);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
/*background: rgba(255, 255, 255, 0.12); */
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.form-table-max {
display: grid;
gap: 0.1rem;
text-align:center;
width: 50%;
margin: 0 auto;
}
@media (max-width: 768px) {
/* 🔥 Convert 3 columns → 1 column */
.form-row-max {
grid-template-columns: 1fr;
gap: 1rem;
}
/* 🔥 Each card spacing */
.form-group-max {
text-align: left;
}
/* 🔥 Reduce big font + padding */
.form-group-max span {
font-size: 14px; /* was 1.8rem (too big) */
padding: 12px;
line-height: 1.4;
border-radius: 10px;
}
/* 🔥 Align icon properly */
.form-group-max span i {
font-size: 14px;
margin-right: 6px;
}
.form-group-max span {
display: flex;
align-items: flex-start;
gap: 10px;
}
.form-group-max span i {
margin-top: 3px;
}
/* 🔥 Reduce overall spacing */
.contact-form {
gap: 1rem;
margin-top: 1.5rem;
}
/* 🔥 Section title fix */
.section-title {
font-size: 20px;
text-align: center;
margin-bottom: 10px;
}
/***********************************/
.section-title {
font-size: 22px;
margin-bottom: 20px;
}
.section-title::after {
width: 40px;
height: 3px;
bottom: -10px;
}
/******************** Card *****************************/
/* 🔥 3 columns → 1 column */
.steps1 {
grid-template-columns: 1fr;
gap: 15px;
}
.step1 {
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
/* 🔥 Remove fixed width */
.step1 {
min-width: 100%;
max-width: 100%;
min-height: auto;
max-height: none;
padding: 15px;
/* 🔥 Simplify shape for mobile */
clip-path: none;
border-radius: 15px;
}
/* 🔥 Remove divider line */
.step1::before {
display: none;
}
/* 🔥 Stack number + content */
.step1 {
flex-direction: column;
align-items: flex-start;
}
.step-number {
width: 100%;
font-size: 22px;
padding: 0;
margin-bottom: 5px;
}
.step-content {
width: 100%;
padding: 0;
}
/* 🔥 Fix heading */
.step-content span {
font-size: 16px;
margin: 0 0 5px 0;
padding: 0;
text-align: left;
}
/* 🔥 Fix paragraph */
.step-content p {
font-size: 14px;
margin: 0;
padding: 0;
text-align: left;
}
/* 🔥 Remove overlap logic */
.step-wrap {
justify-content: stretch;
}
.step-wrap + .step-wrap {
margin-left: 0;
}
.steps1 + .step-wrap {
margin-left: 0;
}
/*******************************************************/
.solar-list {
max-width: 100%;
margin: 15px 0;
}
.solar-list li {
font-size: 14px;
padding: 10px;
margin-bottom: 10px;
line-height: 1.5;
/* 🔥 Better alignment */
align-items: flex-start;
gap: 8px;
}
/* 🔥 Fix icon alignment (IMPORTANT) */
.solar-list li i {
font-size: 16px;
padding-top: 2px; /* instead of 10px ❌ */
flex-shrink: 0; /* prevents icon shrinking */
}
/* 🔥 Reduce left border thickness for mobile */
.solar-list-border li {
border-left-width: 3px;
padding-left: 8px;
}
/****************************************/
.section-title {
font-size: 24px;
margin-bottom: 20px;
}
.section-sub-title {
font-size: 18px;
padding-left: 0;
text-align: center;
}
.h3white-1 {
font-size: 14px;
line-height: 1.6;
text-align: left; /* 🔥 better for mobile readability */
padding: 0;
}
.form-table-max {
width: 100%;
}
/* 🔥 Convert table → card layout */
.form-table-row-max.grid-content {
grid-template-columns: 1fr;
margin-bottom: 10px;
border-radius: 10px;
overflow: hidden;
}
/* 🔥 Hide header row (optional but recommended) */
.grid-header:not(:first-child) {
display: none;
}
/* 🔥 Make each cell like label + value */
.form-table-row-max.grid-content > div {
display: flex;
justify-content: space-between;
font-size: 14px;
padding: 10px;
border: none;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
/* 🔥 Add labels dynamically */
.form-table-row-max.grid-content > div:nth-child(1)::before {
content: "Pump Size";
font-weight: 600;
opacity: 0.7;
}
.form-table-row-max.grid-content > div:nth-child(2)::before {
content: "Panel Capacity";
font-weight: 600;
opacity: 0.7;
}
.form-table-row-max.grid-content > div:nth-child(3)::before {
content: "Water Output";
font-weight: 600;
opacity: 0.7;
}
/* 🔥 First header (title) fix */
.full-width {
font-size: 16px;
text-align: center;
}
/* 🔥 Reduce font */
.form-table-row-max > div {
font-size: 14px;
}
}
/*****************Index page ********************* */
.grid-2
{
grid-template-columns: repeat(2, 1fr);
}
.grid-3
{
grid-template-columns: repeat(3, 1fr);
}
.grid-header > div{
background: var(--gradient-blue);
}
.grid-content > div{
background: var(--gradient-blue-light);
}
.form-table-row-max {
display: grid;
/*grid-template-columns: 1fr 1fr;*/
/*gap: 0.0rem; */
/*border: 1px solid #ccc; */
column-gap: 1px; /* Right side gap between columns */
row-gap: 1px;
}
.full-width {
grid-column: 1 / -1;
}
.form-table-row-max > div {
padding: 0.6rem;
/*border-right: 1px solid #ccc; */ /* column divider */
border-radius: 7px;
padding: 0.5rem;
border: 1px solid rgba(15, 15, 15, 0.2);
color: var(--text-light);
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1.0rem;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
resize: vertical;
}
.txt-bold
{
font-weight: 900;
}
/*
.form-table-row-max > div:last-child {
border-right: none; remove last divider
}
*/
.form-table-max span {
padding: 1.2rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
background: rgba(255, 255, 255, 0.08);
color: var(--text-primary);
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1rem;
font-weight: 400;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
resize: vertical;
border: 1px solid #ccc; /* adds border */
padding: 1rem; /* space between border and content */
border-radius: 4px; /* optional: rounded corners */
}
.form-table-max span i
{
color: var(--text-primary);
background: var(--gradient-royalgold);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
}
.submit-btn {
padding: 1.2rem 3rem;
background: var(--gradient-primary);
color: var(--text-light);
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
margin-top: 1rem;
letter-spacing: 0.5px;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
}
/* Animation Classes */
.fade-in {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in.animate {
opacity: 1;
transform: translateY(0);
}
.slide-in-left {
opacity: 0;
transform: translateX(-60px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-in-left.animate {
opacity: 1;
transform: translateX(0);
}
.slide-in-right {
/*opacity: 0;
transform: translateX(60px);*/
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-in-right.animate {
opacity: 1;
transform: translateX(0);
}
.faq {
max-width: 100%;
margin: 18px auto;
font-family: Arial, sans-serif;
}
.faq-item {
/*border: 1px solid #ddd;*/
margin-bottom: 10px;
border-radius: 4px;
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: bold;
padding: 1.2rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
background: var(--gradient-elegant);
/*color: var(--text-light);*/
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1rem;
font-weight: 400;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
}
.txt-question
{
color: var(--text-light);
}
.arrow {
transition: transform 0.3s ease;
font-size: 14px;
color: var(--text-light);
}
.faq-item.active .arrow {
transform: rotate(90deg);
}
.faq-answer {
display: none;
color: #000;
padding: 1.2rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
background: #bcd2f5;
font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
font-size: 1rem;
font-weight: 400;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
}
.faq-item.active .faq-answer {
display: block;
}
/* Mobile Responsiveness */
@media (max-width: 1024px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.about-content {
grid-template-columns: 1fr;
gap: 4rem;
}
.hero h1,
.heroservice h1 {
font-size: 4rem;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.mobile-menu-toggle {
display: flex;
}
.hero h1,
.heroservice h1 {
font-size: 3rem;
}
.hero .subtitle,
.heroservice .subtitle {
font-size: 1.1rem;
}
.section-title {
font-size: 2.5rem;
}
.portfolio-grid {
grid-template-columns: 1fr;
}
.container {
padding: 0 1.5rem;
}
section {
padding: 5rem 0;
}
.form-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.about-text h3 {
font-size: 2rem;
}
.about-text h4 {
font-size: 1rem;
}
.skills {
margin-top: 2rem;
}
}
@media (max-width: 480px) {
.hero h1,
.heroservice h1 {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.nav-container {
padding: 0 1rem;
}
.container {
padding: 0 1rem;
}
}